<template>
  <div>
    <app-dialog
      v-model:show="open"
      v-bind="dialogOptions"
      ref="appPrompt"
    >
      <div class="prompt-box">
        <input
          v-if="useInput"
          class="prompt-input"
          :placeholder="placeholder"
          :maxlength="maxlength"
          type="text"
          v-model="textArea">
        <textarea
          v-else
          :maxlength="maxlength"
          v-model="textArea"
          :placeholder="placeholder"
          class="prompt-textarea"
          style="resize: none"
        >
        </textarea>
        <div class="btn-actions">
          <div class="btn-cancel" @click="cancel()">{{ cancelBtnText }}</div>
          <div class="btn-confirm" @click="confirm()">{{ confirmBtnText }}</div>
        </div>
      </div>
    </app-dialog>
  </div>
</template>

<script lang="ts">
import AppDialog from '@/components/global/AppDialog/index.vue'
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'

export default defineComponent({
  name: 'AppPrompt',
  components: {
    AppDialog
  },
  emits: ['destroy'],
  setup(props: any, ctx) {
    const data = reactive({
      validator: null,
      pattern: '',
      width: '520px',
      dialogOptions: {
        coverClose: true,
        titleHeight: 44,
        titleFontSize: 18
      },
      placeholder: '请填写',
      useInput:  false,
      maxlength: 50,
      confirmBtnText: '确认',
      cancelBtnText: '取消',
      errorMessage: '输入内容不符合要求'
    })
    let resolve: ((value: unknown) => void) = () => {
    }
    let reject: ((value: unknown) => void) = () => {
    }
    const textArea = ref('')
    const open = ref(false)
    const appPrompt = ref()
    const show = () => {
      return new Promise((r, re) => {
        resolve = r
        reject = re
      })
    }
    const hide = () => {
      open.value = false
      appPrompt.value.hide()
      ctx.emit('destroy')
    }
    const cancel = () => {
      reject('')
      hide()
    }

    const confirm = () => {
      const inputPattern = data.pattern as any
      if (inputPattern && !inputPattern.test(textArea.value || '')) {
        // this.$message.warning(this.errorMessage)
        return false
      }
      const validator = data.validator as null | Function
      if (typeof validator === 'function') {
        validator(textArea.value, (err: string) => {
          if (err) {
            // this.$message.warning(err)
            return
          }
          resolve(textArea.value)
          hide()
        })
        return false
      }
      resolve(textArea.value)
      hide()
    }
    onMounted(() => {
      // open.value = true
      // nextTick().then(()=>show())
    })
    return {
      ...toRefs(data),
      textArea,
      appPrompt,
      confirm,
      hide,
      cancel,
      open,
      show
    }
  }
})
</script>

<style scoped lang="scss">

.prompt-box {
  @include flex-column-normal;
  align-items: center;
  padding-bottom: 10px;

  .btn-actions {
    @include flex-mixin();
    margin-top: 40px;

    .btn-confirm {
      @include flex-mixin;
      width: 100px;
      height: 34px;
      background-color: #ECF5FF;
      color: #409EFF;
      font-size: 14px;
      transition: background-color .15s, color .15s, border .15s;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 3px;
      border: 1px solid transparent;
      user-select: none;
      line-height: 1;

      &:hover {
        border: 1px solid #a2d1fd;
        //background-color: @hover-bgc;
      }
    }

    .btn-cancel {
      font-size: 14px;
      @include flex-mixin;
      width: 100px;
      height: 34px;
      background-color: white;
      color: #909399;
      transition: background-color .15s, color .15s, border .15s;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 3px;
      border: 1px solid #dddddd;
      user-select: none;
      line-height: 1;
      margin-right: 20px;
    }
  }
}

.prompt-input{
  margin-top: 10px;
  min-width: 300px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 3px;
  //background: @body-bgc;
  padding: 13px 15px;
  font-size: 14px;
  color: #303030;
  outline: none;

  &:focus {
    outline: none;
    border: 1px solid #2693ff;
  }
}

.prompt-textarea {
  margin-top: 10px;
  min-width: 300px;
  height: 130px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 3px;
  //background: @body-bgc;
  padding: 13px 15px;
  font-size: 14px;
  color: #303030;
  outline: none;

  &:focus {
    outline: none;
    border: 1px solid #2693ff;
  }
}
</style>
